<template>
  <div
    class="homeBox"
    :class="{
      darkW: themeRef.state.themeState == 'drak',
      lightW: themeRef.state.themeState == 'light',
    }"
  >
    <div class="homeBoxContent">
      <div class="left">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
      <div class="content">
        <router-view />
      </div>
      <div class="right">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import LeftSidebar from "../../components/LeftSidebar/LeftSidebar.vue";
@Options({
  components: {
    LeftSidebar,
  },
})
export default class Home extends Vue {
  themeRef: any = useStore();
  //渲染
  LeftSidebarObjRef = {
    title: "首页",
    menu: [
      {
        id: 1,
        text: "最新博文",
        icon: "icon-reloadtime",
        link: "/home",
      },
      {
        id: 0,
        text: "我的关注",
        icon: "icon-xiaoxishezhi",
        link: "/home/FocusMy",
      }
    ],
  };
}
</script>
<style lang="less" scoped>
@import url("../../assets/less/global.less");
@import url("../../assets/less/home.less");
</style>